<template>
    <div class="score">
        <div class="score_left">
            <p>當前游戲評分</p>
            <p>6.6</p>
        </div>
        <div class="score_right">
            <div class="write" style="text-align: right;">
                <a href="javascript:;" class="add-comment" @click="openReply">写評價</a>
            </div>
            <div class="user-rating">
                <img src="https://img2.baidu.com/it/u=3864502321,2018146111&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" alt="Avatar" class="avatar">
                <div class="username">gfhxqz</div>
                <div class="rating">
                    <span class="star" 
                        v-for="n in 5" 
                        :key="n" 
                        :class="{ active: n <= rating, hover: n <= hoverRating }" 
                        @click="setRating(n)" 
                        @mouseover="setHoverRating(n)" 
                        @mouseleave="resetHoverRating">&#9733;
                    </span>
                </div>
                <div class="add-comment-tip">给个評價吧~</div>
            </div>
        </div>
    </div>
    <div v-show="isShow_reply" class="comment">
        <textarea class=""></textarea>
        <button type="submit" class="bui-btn">發佈</button>
    </div>
</template>

<script setup>
    import { ref } from "vue"
    const rating = ref(0); 
    const hoverRating = ref(0);

    const setRating = (value) => { //点击星星
        rating.value = value;
        console.log(rating.value);
    };

    const setHoverRating = (value) => { //鼠标移入星星
        hoverRating.value = value;
    };

    const resetHoverRating = () => {//鼠标移出星星
        hoverRating.value = 0;
    };
    

    let isShow_reply = ref(false);
    const openReply = ()=>{
        if(isShow_reply.value){
            isShow_reply.value = false;
        }else{
            isShow_reply.value = true;
        }
        console.log(isShow_reply.value);
    }
</script>

<style lang="less" scoped>
.score{
    margin-top: 20px;
    height: 200px;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;
    .score_left{
        flex: 1;
        height: 200px;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #23ade5;
        p{
            text-align: center;
        }
        p:last-child{
            margin-top: 15px;
        }
    }
    .score_right{
        flex: 2;
        height: 200px;
        position: relative;
        .user-rating {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .username {
            font-size: 16px;
            margin-bottom: 10px;
        }
        .rating {
            display: inline-block;
        }

        .star {
            font-size: 25px;
            color: gray;
            cursor: pointer;
        }

        .star.active,
        .star.hover {
            color: #ffb700;
        }
        .add-comment-tip {
            font-size: 12px;
            color: #999;
            margin-top: 10px;
        }
        .add-comment {
            color: #23ade5;
            text-decoration: none;
        }
        .write{
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .add-comment:before {
            content: "";
            background-image: url();
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 6px;
        }
    }
    
}
.comment{
        textarea {
        margin-top: 20px;
        display: block;
        font-size: 12px;
        width: 100%;
        height: 60px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 6px 10px;
        border: 1px solid #23ade5;
        border-radius: 5px;
        outline: 0 none;
        resize: vertical;
    }
    .bui-btn {
        margin-top: 20px;
        position: relative;
        border: 0 none;
        background-color: #23ade5;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
        float: right;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 98px;
        height: 30px;
        line-height: 30px;
    }
    .bui-btn:hover{
        background-color: rgba(#23ade5,.7);
    }
}
</style>